<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地理定位</title>
    <script src="http://api.map.baidu.com/api?v=3.0&ak=6i4KTPzHow6gLVWqYK6vOKw0zFBaapxp"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        article {
            height: 95%;
            width: 60%;

            color: rgb(85, 98, 110);
            font-size: 3em;
            box-shadow: 2px 2px 2px rgba(0,0,0,0.2),
            -2px -2px 20px rgba(255, 255, 255, 1);
            background-color: #efeeee;
        }

        body,
        article {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }

        .geoInfo{
            width: 60%;
            height: 60%;
            border: 3px dashed  rgb(85, 98, 110) ;        }
    </style>
</head>

<body>
<article>
    <h1>百度地图API</h1>
    <div class="geoInfo" id="geoInfo"></div>
</article>
</body>
<script>

    let getInfo = document.getElementById("getInfo")
    let map

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(myGPSFun)
    }
    else alert("您的浏览器不支持地理定位")


    function myGPSFun(e) {
        let jd = e.coords.longitude //经度
        let wd = e.coords.latitude   //纬度

        map = new BMap.Map("geoInfo")   //创建地图实例
        alert(jd)
        alert(wd)
        //117.32209800000001
        //31.863724
        let point = new BMap.Point(jd, wd)   //存储经度和纬度

        let convertor = new BMap.Convertor()    //坐标转换对象
        let pointArr = []
        pointArr.push(point)

        convertor.translate(pointArr, 1, 5, translateCalback)
    }

    function translateCalback(e) {
        if (e.status == 0) {
            let marker = new BMap.Marker(e.points[0])
            alert(e.points[0])
            map.centerAndZoom(e.points[0], 15)   //初始化地图，设置中心坐标和地图级别
            map.addOverlay(marker)
            map.enablesScrollWheelZoom(true)    //开启鼠标滑轮缩放功能
        }
    }

</script>
</html>